<template>
  <div class="app-container home">

    <div style="background-color: white;">

      <div style="width: 600px; display: flex; align-items: center;">

        <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange"
                     style="margin-left: 10px;color: #3fc3e3;">
        </el-checkbox>

        <el-button :loading="exportLoading" @click="handleExport" icon="el-icon-download" style="margin-left: 7.5px;color: #3fc3e3;"
                   type="text">导出
        </el-button>


        <el-button @click="removeFavoritesMultiple" style="margin-left: 7.5px;color: #3fc3e3;" icon="el-icon-delete"
                   type="text">删除
        </el-button>

        <el-dropdown trigger="click">
          <el-button style="margin-left: 7.5px;color: #3fc3e3;" icon="el-icon-s-opportunity"
                     type="text">加入预警
          </el-button>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item @click.native="setForecastMultiple('red')">
              红色预警
            </el-dropdown-item>
            <el-dropdown-item @click.native="setForecastMultiple('orange')">
              橙色预警
            </el-dropdown-item>
            <el-dropdown-item @click.native="setForecastMultiple('yellow')">
              黄色预警
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>


        <el-button icon="el-icon-umbrella" type="text" style="margin-left: 7.5px;color: #3fc3e3;" @click="hiddenAbstractFunc">隐藏摘要
        </el-button>


      </div>


      <div>

        <el-checkbox-group v-model="ids" @change="handleCheckedOpinionsChange">
          <div v-if="favoriteList.length===0&&loading===false"
               style="text-align: center;height: 700px;background-color: white">
            <el-empty description="暂无数据"></el-empty>
          </div>
          <div v-for="item in favoriteList" v-loading="loading">

            <div style="display: flex;padding: 10px;  border-bottom: 1px solid #dcdfe6;">


              <el-checkbox :label="item.id" :key="item.id"><br/></el-checkbox>


              <div style="margin-left: 10px;width: 100%">
                <div style="display: flex">
                  <div style="display: flex;width: 100%">

                    <div
                      @click="GotoDetail(item.id)"
                  class="title_label"
                    >{{item.title}}
                    </div>
                    <div style="margin-left: 10px">
                      <el-tag effect="dark"
                              size="mini" type="danger"
                              v-if="item.level=='red'">
                        红色预警
                      </el-tag>
                      <el-tag effect="dark"
                              size="mini" type="warning"
                              v-if="item.level=='orange'">
                        橙色预警
                      </el-tag>
                      <el-tag color="yellow"
                              effect="light" size="mini"
                              v-if="item.level=='yellow'">
                        黄色预警
                      </el-tag>
                    </div>
                  </div>


                  <el-dropdown trigger="click" style="font-size: 12px">
                    <el-button
                      type="text" size="mini" style="color: #006e8f;background: #a8dfef;padding: 5px 10px">
                    <span v-if="item.ispositive === 1">
                      正面
                    </span>
                      <span v-if="item.isnegative === 1">
                      负面
                    </span>
                      <span v-if="item.isneutral === 1">
                      中性
                    </span>
                      <i   class="anticon ng-star-inserted">
                        <svg-icon icon-class="下箭头" style="height: 8px;width: 8px;"/>
                      </i>
                    </el-button>

                    <el-dropdown-menu slot="dropdown">
                      <el-dropdown-item
                        @click.native="setSensitiveInformationBySigle(item, '正面')">
                        正面
                      </el-dropdown-item>
                      <el-dropdown-item
                        @click.native="setSensitiveInformationBySigle(item, '中性')">
                        中性
                      </el-dropdown-item>
                      <el-dropdown-item
                        @click.native="setSensitiveInformationBySigle(item, '负面')">
                        负面
                      </el-dropdown-item>
                      <!--   <el-dropdown-item
                           @click.native="setSensitiveInformationBySigle(item, '删除')">
                           与我无关（删除）
                         </el-dropdown-item>-->
                    </el-dropdown-menu>
                  </el-dropdown>
                </div>


                <div v-if="hiddenAbstract" style=" width: 100%;color: #565A5E;margin-top: 10px;  margin-bottom: 10px; font-size: 14px; overflow: hidden; text-overflow: ellipsis;
                                display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical;"
                >{{item.content}}
                </div>

                <div>
                  <span style="color: #8d989d;font-size: 12px;">发布时间：{{item.publishTime}}</span>

                  <span v-if="item.siteName!=null"
                       style="margin-left: 10px;font-size: 12px;color: #8d989d;">
                    来源：{{item.siteName}}
                  </span>

                  <div style="text-align: right">

                    <el-button @click="removeFavorites(item)" style="margin-left: 7.5px;color: #3fc3e3;" icon="el-icon-delete"
                               type="text" size="mini">删除
                    </el-button>


                    <el-dropdown trigger="click" style="font-size: 12px">
                      <el-button style="margin-left: 7.5px;color: #3fc3e3;" icon="el-icon-s-opportunity"
                                 type="text" size="mini">加入预警
                      </el-button>
                      <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item
                          @click.native="setForecastSigle(item, 'red')">
                          红色预警
                        </el-dropdown-item>
                        <el-dropdown-item
                          @click.native="setForecastSigle(item, 'orange')">
                          橙色预警
                        </el-dropdown-item>
                        <el-dropdown-item
                          @click.native="setForecastSigle(item, 'yellow')">
                          黄色预警
                        </el-dropdown-item>
                      </el-dropdown-menu>

                    </el-dropdown>

                  </div>
                </div>



              </div>


            </div>


          </div>
        </el-checkbox-group>
        <el-pagination :current-page="pageParams.pageNum"
                       :page-size="10"
                       :page-sizes="[10, 20, 50, 100]"
                       :total="total"
                       @current-change="handleCurrentChange"
                       @size-change="handleSizeChange"
                       layout="total, sizes, prev, pager, next, jumper"
                       style="text-align: center">
        </el-pagination>
      </div>


    </div>


  </div>

</template>

<script>
  import {
    exportOpinionByIds,
    getFavorites,
    getForecastMediaType,
    removeFavorites,
    unbindOpinionForEvent
  } from "@/api/system/opinion";
  import {joinTheForecast, updateSensitiveInformation} from "@/api/system/event";

  export default {
    data() {
      return {
        // 导出遮罩层
        exportLoading: false,
        loading: false,
        sum: 0,
        isIndeterminate: true,
        checkAll: true,

        favoriteList: [],
        total: 0,
        detailInput: '',
        detailSelect: 'all',
        sensitiveInformation: '',
        ids: [],

        pageParams: {
          pageNum: 1,
          pageSize: 10,
        },
        hiddenAbstract: true,
      }
    },
    created() {
      this.getFavorites();
    },
    methods: {
      GotoDetail(id) {
        this.$router.push({path: '/opinion/detail', query: {id: id}});
      },
      hiddenAbstractFunc() {
        this.hiddenAbstract = this.hiddenAbstract === true ? false : true
      },
      setForecastSigle(row, level) {
        const query = {
          ids: row.id,
          level: level
        }
        joinTheForecast(query).then(response => {
          this.$message({
            showClose: true,
            message: '预警成功',
            type: 'success'
          })
          this.getFavorites()
        }).catch(error => {
          this.$message({
            showClose: true,
            message: '预警失败',
            type: 'warning'
          })
        })
      },
      setSensitiveInformationBySigle(row, sensitiveInformation) {
        console.log(row.id)

        if (sensitiveInformation == "删除") {
          const query = {
            ids: row.id,
            type: "exclude",
            eventId: this.eventId
          }
          this.unbind(query)
        } else {
          let query = {
            ids: row.id,
            sensitive: sensitiveInformation
          }
          this.yanpan(query)
        }

      },
      setForecastMultiple(level) {
        if (this.ids.length === 0) {
          this.$message({
            showClose: true,
            message: '请选择文章',
            type: 'warning'
          })
          return
        }
        const query = {
          ids: this.ids,
          level: level
        }
        joinTheForecast(query).then(response => {
          this.$message({
            showClose: true,
            message: '预警成功',
            type: 'success'
          })
          this.getFavorites()
        }).catch(error => {
          this.$message({
            showClose: true,
            message: '预警失败',
            type: 'warning'
          })
        })
      },
      yanpan: function (query) {

        updateSensitiveInformation(query).then(response => {
          this.$message({
            showClose: true,
            message: '研判成功',
            type: 'success'
          })
          this.getFavorites()
        }).catch(error => {
          this.$message({
            showClose: true,
            message: '研判失败',
            type: 'warning'
          })
        })
      },
      unbind: function (query) {

        unbindOpinionForEvent(query).then(response => {
          this.$message({
            showClose: true,
            message: '解除关联成功',
            type: 'success'
          })
          this.getFavorites()
        }).catch(error => {
          this.$message({
            showClose: true,
            message: '已解除关联',
            type: 'warning'
          })
        })
      },
      removeFavoritesMultiple() {
        if (this.ids.length === 0) {
          this.$message({
            showClose: true,
            message: '请选择文章',
            type: 'warning'
          })
          return
        }
        const params = {
          ids: this.ids,
        };
        removeFavorites(params).then(response => {
          this.$message({
            showClose: true,
            message: '移除收藏成功',
            type: 'success'
          })

          //重新请求
          this.getFavorites();
        })
      },
      removeFavorites(row) {
        const params = {
          ids: row.id,
        };
        removeFavorites(params).then(response => {
          this.$message({
            showClose: true,
            message: '移除收藏成功',
            type: 'success'
          })

          //重新请求
          this.getFavorites();
        })
      },

      /** 导出按钮操作 */
      handleExport() {
        if (this.ids.length === 0) {
          this.$message({
            showClose: true,
            message: '请选择文章',
            type: 'warning'
          })
          return
        }

        const params = {
          ids: this.ids,
        };

        this.$confirm('是否确认导出所选舆情数据项?', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(() => {
          this.exportLoading = true;
          return exportOpinionByIds(params);
        }).then(response => {
          this.download(response.msg);
          this.exportLoading = false;
        })
      },


      handleCheckAllChange(val) {
        this.ids = val ? this.favoriteList.map(item => {
          return item.id;
        }) : [];
        this.isIndeterminate = false;

        if (!val) {
          this.$notify({
            title: '警告',
            message: '情选择舆情载体',
            type: 'warning'
          });
        }
        //重新请求
        this.getFavorites()
      },

      handleCheckedOpinionsChange(value) {
        let checkedCount = value.length;
        this.checkAll = checkedCount === this.favoriteList.length;
        this.isIndeterminate = checkedCount > 0 && checkedCount < this.favoriteList.length;
      },
      handleSelectionChange(val) {
        this.ids = []
        for (let i = 0; i < val.length; i++) {
          this.ids.push(val[i].id)
        }
      },

      handleSizeChange(pageSize) {
        this.pageParams.pageSize = pageSize
      },
      handleCurrentChange(currentPage) {
        this.pageParams.pageNum = currentPage
        this.getFavorites();
      },


      getFavorites() {
        getFavorites(this.pageParams, {}).then(response => {
          this.favoriteList = response.rows
          this.total = response.total
        })
      },


    }
  }
</script>

<style scoped lang="scss">


  .content-shape {
    display: flex;
    flex-direction: column;
    margin: 10px;
    width: 100%;
    min-height: 690px;
  }

  .search-shape {
    padding: 15px 35px;
    background-color: #fff;
  }

  .event-shape {
    width: 100%;
    position: relative;
    margin-top: 24px;
    min-height: 330px;
    padding: 15px;
    background-color: #fff;

    .handle-nav {
      position: absolute;
      z-index: 999;
      right: 50px;
      top: 35px;
      display: flex;
      justify-content: space-between;
      margin: 0 15px;
      width: calc(100% - 135px);
      height: 30px;
    }

  }
</style>

<style scoped lang="scss">

  .home {
    background-color: white;
    margin: 10px;
  }

  .title_label{
    max-width: calc(100% - 100px);
    overflow: hidden;
    color: #1a1a1a;
    font-size: 16px;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-weight: 700;
    cursor: pointer;
  }
  .anticon {
    display: inline-block;
    color: inherit;
    font-style: normal;
    line-height: 0;
    text-align: center;
    text-transform: none;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
</style>
